<template>
  <div>
    <el-container>
      <el-header style="  box-shadow:0  0  2px 1px #F0F3F4; position: fixed;top: 0;width: 100%;height: 70px;text-align: center;background: #fff;z-index: 2002;">
        <MyHeader @getSidebar="getSidebar"></MyHeader>
      </el-header>
       <el-container>
         <Sidebar class="sidebar-container"  :SidebarData="SidebarItem" v-show=" SidebarItem == '1' ? false : true" ></Sidebar>
       <el-main>
        <AppMain/>
      </el-main>
    </el-container>
      <el-footer style="position: fixed;bottom: 0;width: 100%;height: 70px;text-align: center;background: #fff;z-index: 2002;">
        <h1>尾部</h1>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import MyHeader from "./UOAP/header.vue";
import AppMain from "./UOAP/AppMain.vue";
import Sidebar from"./UOAP//Sidebar"
export default {
  name: "LayouttHome",
  data() {
    return {
      noShow:false,
      SidebarItem:1
    };
  },
  components: {
    MyHeader,
    AppMain,
    Sidebar
  },
  methods: {
    getSidebar(msg){
   console.log("点击===="+msg)
     this.SidebarItem =msg
    }
  },
};
</script>


<style>
 /* .el-header::before {
    z-index: -999;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    background-color:  red;
    background-size: cover;
  } */
.sidebar-container{
  /* background-color: aqua; */
  width : 15%;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    border-radius: 8px;
    top: 80px;
    left: 40px;
    bottom: 0px;
    height: 50%;
}
.el-main{
    width : 85%;
}
</style>